<template>
  <a-drawer
    :title="title"
    :width="drawerWidth"
    placement="right"
    :closable="false"
    :visible="visible"
    @close="onClose"
  >
    <a-card>
      <a-form-model
        :model="model"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item label="加工单号">{{
              model.processNum
            }}</a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="数量">{{
              model.productionQuantity
            }}</a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="开始时间">{{
              moment(model.processStartTime).format("YYYY-MM-DD")
            }}</a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="结束时间">{{
              moment(model.processEndTime).format("YYYY-MM-DD")
            }}</a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item label="商品名称">{{
              model.goodsName
            }}</a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="商品编号">{{
              model.goodsCode
            }}</a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="商品规格">{{
              model.specifications
            }}</a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
    <a-card>
      <a-tabs v-model.trim="current" @change="handleChange">
        <a-tab-pane
          v-for="item in tabOption"
          :tab="item.label"
          :key="item.value"
        >
          <a-table
            v-if="current === 1"
            :columns="MaterialColumns"
            :data-source="tableData"
            :loading="loading"
            :pagination="false"
            bordered
            @change="handleTableChange"
            :rowKey="(record, index) => record.id"
          >
          </a-table>

          <a-table
            v-else
            :columns="OutputColumns"
            :data-source="tableData"
            :loading="loading"
            :pagination="false"
            bordered
            @change="handleTableChange"
            :rowKey="(record, index) => record.id"
          >
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </a-drawer>
</template>

<script>
import api from "@/api/apiServer";
import { tableMinxins } from "@/unit/mixins/tableMinxins.js";
import { MaterialColumns, OutputColumns } from "./tableConfig.js";
import moment from "moment";
export default {
  mixins: [tableMinxins],
  data() {
    return {
      moment,
      MaterialColumns,
      OutputColumns,
      visible: false,
      drawerWidth: 1000,
      title: "工单履历",
      tabOption: [
        { label: "投料", value: 1 },
        { label: "产出", value: 2 },
      ],
      model: {},
      current: 1,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      workSheetId: "",
    };
  },
 mounted() {},
  methods: {
    // 查询加工单详情
    async getDetail(workSheetId) {
      const res = await api.WorksheetSelByWorkSheetId({ workSheetId });
      this.model = res.data;
    },
    //  查询投料
    async getWorksheetSelCast(workSheetId) {
      const res = await api.WorksheetSelCastByInfoId({ workSheetId });
      this.tableData = res.data;
    },
    // 查询产出
    async getWorksheetSelOut(workSheetId) {
      const res = await api.WorksheetSelOutputByInfoId({ workSheetId });
      this.tableData = res.data;
    },
    handleChange(current) {
      this.current = current;
      if (current === 1) {
        this.getWorksheetSelCast(this.workSheetId);
      } else {
        this.columns = [];
        this.columns = OutputColumns;
        this.getWorksheetSelOut(this.workSheetId);
      }
    },
    showDrawer(record) {
      this.workSheetId = record.id;
      this.getDetail(this.workSheetId);
      this.getWorksheetSelCast(this.workSheetId);
      this.visible = true;
    },
    onClose() {
      this.visible = false;
      this.model = Object.assign({});
      this.current = 1;
    },
  },
};
</script>

<style lang="less" scoped>
.card-header {
  margin: 20px 0;
}
.card-content {
  button {
    margin-right: 13px;
  }
}

.card-content {
  button {
    margin-right: 13px;
  }
  .contetnBox {
    min-height: 809px;
    background: #ffffff;
    border: 1px solid #ebedf0;
    border-radius: 2px;
    padding: 20px 0;
    .headerBox {
      padding: 0 20px;
    }
  }
}
</style>
